<template>
  <div>
   <div class="shopping_cart_list">
      <ShoppingCartItem v-for="(item, index) in items" :item="item" :key="index"/>
   </div>
   <div class="shopping_cart_info">
     <div class="shopping_cart_info_wrapper">
       <div>
         全选
         <input type="checkbox" ref="checkAll" :checked="this.$store.state.shoppingCart.allChecked" v-on:change="chechAll"/>
       </div>
       <div>{{`总量：${this.$store.getters.getAllCount}`}}</div>
       <div>{{`总价：${this.$store.getters.getTotalPrice}`}}</div>
     </div>
   </div>
  </div>
</template>


<script>
import ShoppingCartItem from "../components/ShoppingCartItem";

export default {
  components:{
    ShoppingCartItem
  },
  data:function(){
    return{
      items:this.$store.state.shoppingCart.items
    }
  },

  mounted:function(){
    window.console.log(this.$store)
  },
  methods:{
    chechAll:function(){
      console.log(this.$refs.checkAll.checked)
     this.$store.dispatch("updateAllCheckedStatus",this.$refs.checkAll.checked)
    }
  }


}
</script>

<style scoped>
.shopping_cart_list
{
  width: 100%;
  margin-bottom: 64px;
}
.shopping_cart_info
{
  position: fixed;
  width: 100%;
  height: 64px;
  bottom: 0px;
  border: 1px solid red;
  background-color: white;
}
.shopping_cart_info_wrapper
{
  width: 100%;
  height: 64px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.shopping_cart_info_wrapper div
{
  width: 30%;
  height: 64px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid blue;
}
</style>